<template>
  <div id="Announcement_container" style="height: 98%">
    <el-card>
      <div class="searchDiv">
        <div class="searchDivLeft">
          タイトル:
          <el-input v-model="Search.searchbean.title" placeholder=""></el-input>&nbsp; 掲載日:
          <el-date-picker v-model="Search.searchbean.insertTime" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" placeholder=""> </el-date-picker>
          <el-button type="primary" v-preventReClick class="search" icon="el-icon-search" @click="SearchAnnouncement()">検索</el-button>
        </div>
        <div class="searchDivRight">
          <el-button type="primary" v-preventReClick icon="el-icon-plus" @click="dialogFormVisible = true">新規</el-button>
          <el-button type="warning" v-preventReClick icon="el-icon-edit" @click="ReviseAnnouncement()">修正</el-button>
          <el-button type="danger" v-preventReClick icon="el-icon-delete" @click="deleteAnnouncement()">削除</el-button>
          <el-dialog title="おしらせ新規" v-model="dialogFormVisible" @close="resetForm('Announcement')" destroy-on-close center>
            <el-form :model="Announcement" :rules="rules" ref="Announcement">
              <el-form-item label="タイトル" prop="title">
                <el-input v-model.trim="Announcement.title" autocomplete="off" placeholder=" " class="dialog_detail" maxlength="20"></el-input>
              </el-form-item>
              <el-form-item label="内容" prop="noticeCon">
                <editor v-model="Announcement.noticeCon" v-on:greetA="AcceptParameter1" :content="Announcement.noticeCon"></editor>
              </el-form-item>
              <el-button type="primary" icon="el-icon-circle-check" v-preventReClick @click="submitAnnouncement()" class="save">保存</el-button>
            </el-form>
          </el-dialog>
          <el-dialog title="お知らせ修正" v-model="dialogFormVisible1" @close="resetForm('update')" destroy-on-close center>
            <el-form :model="update" :rules="rules" ref="update">
              <el-form-item label="タイトル" prop="title">
                <el-input v-model.trim="update.title" autocomplete="off" placeholder=" " class="dialog_detail" maxlength="20"></el-input>
              </el-form-item>
              <el-form-item label="内容" prop="noticeCon">
                <editor v-model="update.noticeCon" v-on:greetB="AcceptParameter2" :content="update.noticeCon"></editor>
              </el-form-item>
              <el-button type="primary" icon="el-icon-circle-check" v-preventReClick @click="updateAnnouncement()" class="save">保存</el-button>
            </el-form>
          </el-dialog>
        </div>
      </div>
      <el-table :data="Searchlist" border style="width: 100%" :header-cell-style="{ background: '#f2f2f2', color: '#606266' }" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="title" label="タイトル"> </el-table-column>
        <el-table-column label="内容">
          <template #default="scope">
            <el-tooltip placement="top" popper-class="atooltip">
              <!-- <div  v-html="row.noticeCon" slot="content"></div> -->
              <template #content><p v-html="scope.row.noticeCon"></p></template>
              <div class="atooltip_detail" v-html="scope.row.noticeCon"></div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="insertTime" label="掲載日"> </el-table-column>
      </el-table>
      <div class="divider_pagination">
        <!-- <el-divider></el-divider> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Search.indexPage"
          :page-size="Search.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script >
// 引入局部组件editor.vue 部分コンポーネントeditor.vueを紹介します
import editor from './editor.vue'
export default {
  components: {
    editor
  },
  data() {
    return {
      Search: {
        searchbean: {
          title: '',
          insertTime: ''
        },
        indexPage: 1,
        pageSize: 8
      },
      Searchlist: [],
      total: 0,
      multipleSelection: [],
      dialogFormVisible: false,
      dialogFormVisible1: false,
      // 新規
      Announcement: {
        // noId: '',
        insertAid: 'string',
        title: '',
        noticeCon: '',
        updateAid: ''
        // date: new Date()
      },
      // 修正
      update: {
        noId: [],
        title: '',
        noticeCon: '',
        updateAid: 'admin'
      },
      // 获取
      update1: '',
      rules: {
        title: [{ required: true, message: 'タイトルを入力してください', trigger: 'blur' }],
        noticeCon: [{ required: true, message: '内容を入力してください', trigger: 'blur' }]
      },
      // 削除
      delete: { noId: [] }
    }
  },
  created() {
    this.SearchAnnouncement()
  },
  methods: {
    resetForm(formName) {
      //重置form表单 フォームをリセット
      this.$refs[formName].resetFields()
    },
    // 接受子组件传来的参数   サブコンポーネントから渡されたパラメーターを受け入れる
    AcceptParameter1(content) {
      this.Announcement.noticeCon = content
    },
    AcceptParameter2(content) {
      
        this.update1 = content
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    // 检索
    SearchAnnouncement() {
      this.axios
        .post('/notice/listNotice', this.Search)
        .then((res) => {
          this.Searchlist = res.data.data.list
          for (var i = 0; i < res.data.data.list.length; i++) {
            this.Searchlist[i].insertTime = res.data.data.list[i].insertTime.substring(0, 10)
          }
          this.total = res.data.data.total
          // console.log(this.grouplist)
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 监听 pagesize 改变的事件 ページサイズ変更イベントを聞く
    handleSizeChange(newSize) {
      console.log(newSize)
      this.Search.pageSize = newSize
      this.SearchAnnouncement()
    },
    // 监听 页码值 改变的事件  ページ番号値変更イベントの監視
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.Search.indexPage = newPage
      this.SearchAnnouncement()
    },
    // 新規
    submitAnnouncement() {
      this.$refs.Announcement.validate((valid) => {
        console.log(this.Announcement)
        if (valid) {
          console.log(this.Announcement)
          this.axios
            .post('/notice/insert', this.Announcement)
            .then((res) => {
              if (res.data.success !== 1) {
                return this.$message.error(res.data.msg)
              }
              this.$message.success(this.$getMsg('I0001'))
              this.SearchAnnouncement()
              this.dialogFormVisible = false
            })
            .catch((error) => {
              console.log(error)
            })
        }
      })
    },
    // 修正
    ReviseAnnouncement() {
      if (this.multipleSelection.length !== 1) {
        return this.$message({
          showClose: true,
          message: this.$getMsg('W0001'),
          type: 'warning'
        })
      }
      this.dialogFormVisible1 = true
      this.update.noId.push(this.multipleSelection[0].noId)
      // this.update.noId = this.multipleSelection[0].noId
      this.update.title = this.multipleSelection[0].title
      this.update.noticeCon = this.multipleSelection[0].noticeCon
      console.log(this.update.noticeCon)
    },
    updateAnnouncement() {
      this.update.noticeCon = this.update1
      this.$refs.update.validate((valid) => {
        if (valid) {
          console.log(this.update)
          this.axios
            .put('/notice/update', this.update)
            .then((res) => {
              if (res.data.success !== 1) {
                return this.$message.error(res.data.msg)
              }
              this.$message.success(this.$getMsg('I0002'))
              console.log(this.update)
              this.SearchAnnouncement()
              this.dialogFormVisible1 = false
            })
            .catch((error) => {
              console.log(error)
            })
        }
      })
    },
    // 削除
    deleteAnnouncement() {
      this.delete.noId = []
      if (this.multipleSelection.length === 0) {
        return this.$message({
          showClose: true,
          message: this.$getMsg('W0002'),
          type: 'warning'
        })
      }
      // console.log(this.multipleSelection)
      this.multipleSelection.forEach((item) => {
        this.delete.noId.push(item.noId)
      })
      this.$confirm(this.$getMsg('I0004'), {
        cancelButtonText: 'キャンセル',
        confirmButtonText: '確認',
        type: 'warning'
      }).then(
        () => {
          this.axios
            .delete('/notice/delete', { data: this.delete })
            .then(() => {
              this.$message.success(this.$getMsg('I0003'))
              this.SearchAnnouncement()
            })
            .catch((error) => {
              console.log(error)
            })
        },
        (res) => {
          console.log(res)
        }
      )
    }
  }
}
</script>

<style scoped>
.detail {
  height: 50px;
  /* background-color: #00FFFF; */
  margin-top: 10px;
}

.el-divider {
  position: absolute;
  bottom: 75px;
  width: 1030px;
}
.el-input {
  width: 140px;
}
/* :deep(.el-date-editor.el-input, .el-date-editor.el-input__inner) {
  width: 145px;
} */
:deep(.el-input--prefix .el-input__inner) {
  padding-left: 30px !important;
}
.save {
  position: relative;
  left: 310px;
  top: 0px;
}
.dialog_detail {
  width: 480px;
  padding-left: 14px;
  padding-top: 5px;
}
:deep(.el-dialog) {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 35%;
}
/* /deep/ .el-dialog__body{
  display: flex;
  justify-content: center;
  align-content: center;
} */
:deep(.el-form-item__label) {
  width: 90px !important;
  font-size: 17px;
}
/* 验证规则错误后的小字样式
 検証ルールエラー後の小さな印刷スタイル*/
:deep(.el-form-item__error) {
  left: 15px;
}
:deep(.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before) {
  content: '';
}
/* 只显示一行
1行だけ表示する */
:deep(.atooltip_detail) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

:deep(.el-switch__core) {
  width: 45px !important;
  margin-top: -3px;
}
/*设置富文本编辑器图标，使得图标显示
  アイコンが表示されるようにリッチテキストエディタのアイコンを設定します*/
:deep(.w-e-toolbar .w-e-menu) {
  font-size: 15px;
  height: 35px;
}
/* 为了使光标放在富文本菜单上不显示长条
   リッチテキストメニューにカーソルを置くために長いバーが表示されない*/
:deep(.w-e-menu-tooltip) {
  display: none;
  padding: 0px;
}
/* 设置的全局样式导致样式失效,重新设置样式
   グローバルスタイルを設定すると、スタイルが無効になり、スタイルをリセットします*/
:deep(.w-e-text i) {
  font-style: italic;
}
/* 设置富文本内容的行高
  リッチテキストコンテンツの行の高さを設定します*/
:deep(.w-e-text p, .w-e-text h1, .w-e-text h2, .w-e-text h3, .w-e-text h4, .w-e-text h5, .w-e-text table, .w-e-text pre) {
  margin: 8px 0px;
  line-height: 1;
}
:deep(.el-form-item__label) {
  width: 125px !important;
}
</style>
<style>
.el-popper.is-dark .el-popper__arrow::before {
  background: #e0f1de !important;
}
.atooltip {
  background: #e0f1de !important;
  color: #000000 !important;
  font-size: 14px !important;
  width: 515px;
}
</style>
